<template>
    <div class="hello">
        <h3>{{ msg }}</h3>
        <hr/>
        <h3>setup的使用</h3>
        <div>
            name:{{name}},age:{{age}}
        </div>
        <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>  <br>
        <hr/>
        <div>{{person.name}}:{{person.age}}</div>
        <div>{{person2.name}}:{{person2.age}}</div>
        <div>{{person3.name}}:{{person3.age}}</div>
        <el-button @click="changePerson">changePerson</el-button>
    </div>
</template>

<script>
    import {ref,reactive,toRefs} from 'vue'
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        setup(){ // setup 不允许前面加async
            let name = '张三'
            let age = 18
            //方法
            function sayHello(){
                console.log(`我叫${name}，我${age}岁了，你好啊！`)
            }
            function test2(){
                console.log(name)
                console.log(age)
                console.log(sayHello)
            }

            let person = reactive({
                name:"wf",
                age:20,
                child:{
                    name:"wf2",
                    age:20
                }
            })
           let person2 = reactive({
               name:"wf2",
               age:"1",
               child:{

               }
           })
            let person3 = reactive(JSON.parse(JSON.stringify(person))) // 深拷贝得到一个互不干扰的响应式对象
           let changePerson = ()=>{
               // 不能这样重新赋值 失去响应式
               // person = reactive({
               //     name:"wf",
               //     age:20
               // })
               // person.age +=1
               // person = Object.assign(person,{age:1234,name:45123}) // 可以  赋值整个表单对象
               // Object.assign  必须以原来声明好的reactive数据为跟数据
               person2 = Object.assign(person2,person,{age:1234}) //  复制一个响应式对象 并且互不干扰（深层次不行）
               person2= JSON.parse(JSON.stringify(person2))
               // person3= JSON.parse(JSON.stringify(person)) // 得不到响应式对象
               // person3 = toRefs(person)
               setTimeout(()=>{
                   person.age +=1
                   person2.age +=200
                   person.child.age=10000
                   console.log(person)
                   console.log(person2)
               },2000)

               setTimeout(()=>{
                   person3.age +=2000
                   person3.child.age=100000
                   console.log(person)
                   console.log(person2)
                   console.log(person3)
               },3000)
            }

            return {
                name,
                age,
                person,
                person2,
                person3,
                sayHello,
                test2,
                person3,
                changePerson
            }

            //返回一个函数（渲染函数） 了解
            // return ()=> h('h1','尚硅谷')
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 10px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>
